<template>
  <a-modal
    :open="modelValue"
    title="AI帮我写"
    wrapClassName="ai-modal"
    :footer="null"
    @cancel="onCancel"
  >
    <a-textarea
      v-model:value="prompt"
      placeholder="请输入简单的描述，AI将智能完善创意描述"
      :auto-size="{ minRows: 8, maxRows: 12 }"
      show-count
      :maxlength="2000"
    />
    <div class="footer">
      <template v-if="isCreate">
        <a-space>
          <a-button shape="round" :loading="loading" @click="handleRest"
            >重新描述</a-button
          >
          <a-button
            type="primary"
            shape="round"
            :loading="loading"
            @click="handleUse"
            >使用此描述</a-button
          >
        </a-space>
      </template>
      <a-button
        v-else
        type="primary"
        shape="round"
        :loading="loading"
        @click="handleCreate"
        >{{ loading ? "生成中" : "生成描述" }}</a-button
      >
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { aiCreate } from "@/api/draw";

defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["update:modelValue", "use"]);
const prompt = ref("");
const promptInput = ref("");
const loading = ref(false);
const isCreate = ref(false);

const onCancel = () => {
  emits("update:modelValue", false);
};
const handleCreate = async () => {
  try {
    loading.value = true;
    const { data } = await aiCreate({ prompt: prompt.value });
    promptInput.value = prompt.value;
    prompt.value = data;
    loading.value = false;
    isCreate.value = true;
  } catch (error) {
    loading.value = false;
  }
};
const handleRest = () => {
  prompt.value = promptInput.value;
  isCreate.value = false;
};
const handleUse = () => {
  emits("use", prompt);
  onCancel();
};
</script>
<style lang="less">
.ai-modal {
  .ant-modal-content {
    background: #272c3b;
  }
  .ant-modal-header {
    background: none;
  }
  .ant-modal-title,
  .ant-modal-close,
  .ant-input-textarea-show-count::after {
    color: #fff;
  }
  textarea {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    &::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.38);
    }
  }
  .ant-input-textarea-show-count {
    &::after {
      color: #fff;
    }
  }
  .footer {
    margin-top: 10px;
  }
}
</style>
